LoA: FR Wiki Table Formats
This page about how to best use the features we've created for WikiTables to standardize some of the look/feel of our pages. ''Getting Started: For general information about adding content to this wiki, see our LoA FR Help page.'' CSS class: loa-table The default table style I've created does the following: # Table Settings ## Sets the table width to 90% of the screen size ## Centers the table within the container that it's displayed in ## Sets a 1 pixel gray border around every cell (headers included) ## Sets a 2 pixel padding between the text in a cell and the border # Heading Settings ## Sets the bacground to the Dark Orange we're using for our theme ## Sets the font to bold ## Sets the font color to white ## Centers the header in the cell # Column Headers ## Forces the text to the bottom of the cell # Row Headers ## Sets the background to a medium gray color ## Sets the text in the middle of the cell ## Makes the font bold and colored black # General Cell Settings ## Sets the background color to an off-white for the cells ## Text is centered vertically and horizontally in the cell # Table Captions ## If present, captions are bolded and centered over the top of the table Important: You CAN override any of these by using standard Wikitext and defining the style you want for a particular cell. If you are curious about seeing the CSS styles directly, you can view them in the LoA FR common.css file. Basic LoA Table Nothing fancy here, just basic WikiText stuff. WikiText Results With a Caption and Row Headers For this one, I've added a caption to the table, and made the first cell in each row a "Row Header". WikiText Results Important: While column headers aren't choosy about whether you designate they have columnar scope, you will need to ensure you scope row headers properly. If not, you'll get something like this instead: Additional "loa-table" Variants While the standard format of the table works okay for large tables, smaller ones may actually be harder to read this way. So I've created additional CSS classes to create a centered table which fits it's contents, and two more to float tables to the right or left of the text you've written. Centered This is the same as the example above, but I've added the "loa-center" qualifier to it. WikiText Results Float Left Centering a small table may work fine. But sometimes the table is so small you'd rather have your text flow around it. I've added floating options as well. In this one, we have the same small table, but it will float to the left allowing the text to flow around it on the right. WikiText Results This text is completely meaningless. It only serves as an example of how text flows (or doesn't flow) around the table in the example. I really can't believe you're still reading this. There isn't any good information in this whole paragraph. Nothing but filler words designed to put enough text so that my small example tables have something to float around. But since you're still reading, I guess I have to say "Thank you for your attention." You may go on with understanding how LoA: FR tables work now! Float Right Same idea as floating to the left, but this time the table will display on the right side of the page while the text flows to the left. WikiText Results This text is completely meaningless. It only serves as an example of how text flows (or doesn't flow) around the table in the example. I really can't believe you're still reading this. There isn't any good information in this whole paragraph. Nothing but filler words designed to put enough text so that my small example tables have something to float around. But since you're still reading, I guess I have to say "Did you think I'd write something different?" You may go on with understanding how LoA: FR tables work now! Sorting and Collapsing In addition to our formats, the tables will still accept the Wikia and MediaWiki CSS class designationsl. So, if you want to make your tables sortable or collapsible, you still can even with our standardized styling! Sortable List To make a list sortable, you just have to specify the class "sortable". Note that you can also specify data types for columns, and even provide custom sorting orders. See Help:Sorting on the Wikia Community site for more information. WikiText Results Collapsible For tables where the reader may not want to see the table every time they go to the page, you can make them collapse as well. WikiText Results Box Style I've also created some CSS styles for use when we don't want internal borders. See the LoA:FR Box Style page for more information. Additional Information Here are some additional external resources in regards to tables in wikis: * Wikia Tables Using Visual Editor * Wikia Tables Using Source (WikiText) * MediaWiki Table Help Page Category:Wiki Topics